import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:wy/utils/screen_util.dart';

class HBannerSlider extends HookWidget {
  final List<Map> items;
  const HBannerSlider({Key key, this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);
    final _value = useState(0);
    // 位置标准
    final prev = (_value.value - 1 + items.length) % items.length;
    final cur = _value.value;
    final next = (_value.value + 1) % items.length;
    // 图片相关
    final W = screen.calc(344),
        H = screen.calc(438),
        offsetH = screen.calc(200);

    final secondaryData = {'scale': .8, 'opacity': .5},
        curData = {'scale': 1.0, 'opacity': 1.0},
        otherData = {'scale': .8, 'opacity': 0.0};

    // 讲items排序
    items.sort((item1, item2) {
      double opacity1, opacity2;

      if (item1['index'] == prev || item1['index'] == next)
        opacity1 = secondaryData['opacity'];
      else if (item1['index'] == cur)
        opacity1 = curData['opacity'];
      else
        opacity1 = otherData['opacity'];

      if (item2['index'] == prev || item2['index'] == next)
        opacity2 = secondaryData['opacity'];
      else if (item2['index'] == cur)
        opacity2 = curData['opacity'];
      else
        opacity2 = otherData['opacity'];

      if (opacity1 < opacity2)
        return -1;
      else if (opacity1 > opacity2) return 1;
      return 0;
    });

    return GestureDetector(
        // 手势 往右或者左滑动
        onHorizontalDragEnd: (DragEndDetails detail) {
          var dx = detail.velocity.pixelsPerSecond.dx;

          if (dx.abs() >= 50) {
            if (dx < 0) {
              _value.value = (_value.value + 1) % items.length;
            } else {
              _value.value = (_value.value - 1 + items.length) % items.length;
            }
          }
        },
        child: Container(
          margin: EdgeInsets.only(top: screen.calc(38)),
          height: H,
          child: Stack(
            children: items.map((item) {
              var index = item['index'];
              var data;
              var offset = Offset(0, 0);
              // 赋值透明度 和缩放比例
              if (index == cur)
                data = curData;
              else if (index == prev || index == next)
                data = secondaryData;
              else
                data = otherData;
              // 偏移量
              if (index == prev)
                offset = Offset(-offsetH, 0);
              else if (index == next) offset = Offset(offsetH, 0);

              // 返回widgt
              return Transform.translate(
                offset: offset,
                child: Transform.scale(
                  scale: data['scale'],
                  child: Opacity(
                    opacity: data['opacity'],
                    child: Container(
                      width: W,
                      height: H,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(screen.calc(10)),
                        boxShadow: [
                          BoxShadow(
                            color: Color(0x66000000),
                            blurRadius: screen.calc(20),
                          )
                        ],
                      ),
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(screen.calc(10)),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Image.asset(item['img'],
                                  width: screen.calc(344),
                                  height: screen.calc(344)),
                              Padding(
                                  padding: EdgeInsets.only(
                                      top: screen.calc(18),
                                      left: screen.calc(16),
                                      right: screen.calc(16)),
                                  child: Text(item['title'],
                                      maxLines: 2,
                                      style: TextStyle(
                                        fontSize: screen.calc(23),
                                      ))),
                            ],
                          )),
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        ));
  }
}
